import Base from '@/components/Base';
import { View } from '@/components/KayUI';
import Blurs from '@/components/Svg/Blurs';
import { Router } from '@/modules/navigator';
import { Layout, Menu } from 'antd';
import type { MenuProps } from 'antd/es/menu';
import { history, Outlet } from 'umi';

// const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

type MenuItems = Required<MenuProps>['items'];
interface MENU_ITEM {
  label: string;
  key?: Router | string;
  children?: MENU_ITEM[];
}
interface State {
  openKeys: string[];
  selectedKeys: string[];
  hideSide?: boolean;
}

export default class Index extends Base<any, State> {
  public state: State = {
    openKeys: [],
    selectedKeys: [],
  };
  private menuList = [
    {
      label: '抖音',
      key: 'menuitem1',
      children: [
        {
          label: '笼中鸟',
          key: 'birdCage',
        },
        {
          label: '昼夜按钮',
          key: 'dayNightbuttons',
        },
        {
          label: '三维昼夜按钮',
          key: 'button3d',
        },
        {
          label: '520纪念日按钮',
          key: 'buttonLove',
        },
        {
          label: 'loading3D',
          key: 'loading3d',
        },
        {
          label: '融合加载',
          key: 'loadings',
        },
        {
          label: '彩色按钮',
          key: 'buttonColorful',
        },
        {
          label: '头像跟随输入框',
          key: 'avatarInput',
        },
        {
          label: '地球航班',
          key: 'earthFlight',
        },
        {
          label: 'google gemini效果',
          key: 'geminiSvg',
        },
      ],
    },
    {
      label: 'Canvas特效',
      key: 'menuitem2',
      children: [
        {
          label: '流体墙纸',
          key: 'fluidWallpaper',
        },
        {
          label: '光',
          key: 'lumen2d',
        },
      ],
    },
    {
      label: '特效插件',
      key: 'menuitem3',
      children: [
        {
          label: '测试',
          key: 'test',
        },
        {
          label: 'Lottie动画',
          key: 'lottie',
        },
        {
          label: 'GSAP动画',
          key: 'gsap',
        },
        {
          label: '丝滑滚动',
          key: 'smoothScroll',
        },
        {
          label: '颜色',
          key: 'color',
        },
        {
          label: 'UI特效',
          key: 'uiandae',
        },
      ],
    },
    {
      label: 'WebGL',
      key: 'menuitem4',
      children: [
        {
          label: 'WebGL学习',
          key: 'webgl',
        },
        {
          label: 'Three学习',
          key: 'three',
        },
        {
          label: '测试笔记',
          key: 'threeTest',
        },
        {
          label: '数学库',
          key: 'threeMath',
        },
        {
          label: '曲线',
          key: 'curve',
        },
        {
          label: '粒子系统测试',
          key: 'threePointsTest',
        },
        {
          label: '粒子波浪',
          key: 'threeWavePoints',
        },
        {
          label: '粒子CPU&GPU',
          key: 'pointsGpu',
        },
        {
          label: '粒子动效',
          key: 'pointsAnimate',
        },
        {
          label: '模型布尔',
          key: 'threeCsg',
        },
        {
          label: '加载器',
          key: 'threeLoaders',
        },
        {
          label: '渲染器',
          key: 'renderer',
        },
        {
          label: 'noise噪波',
          key: 'noise',
        },
      ],
    },
  ];
  private rootMenuRouteKeys: { label: string; key: string }[] = []; //二维菜单转一维
  private currentPath: string = '';

  public async didShow() {}

  public async didMount() {
    // console.log('history', history);
    history.listen((listener) => {
      // console.log('????fuck', listener)
      if (this.currentPath !== listener.location.pathname) {
        this.currentPath = listener.location.pathname;
        const key = this.parseLocationPath(listener.location.pathname);
        this.setState({
          selectedKeys: [key],
        });
      }
    });

    this.rootMenuRouteKeys = [];
    this.menuList.map((menu) => {
      if (menu && menu.children) {
        menu.children.map((e) => {
          this.rootMenuRouteKeys.push({
            label: e.label,
            key: e.key,
          });
        });
      } else {
        this.rootMenuRouteKeys.push({
          label: menu.label,
          key: menu.key,
        });
      }
    });

    const key = this.parseLocationPath(window.location.pathname);
    this.setState({
      selectedKeys: [key],
    });
  }

  public componentDidUpdate(prevProps: any) {
    // console.log('prevProps::', this.currentPath, window.location)
  }

  private parseLocationPath = (path: string) => {
    //根据route的pathname, 获取当前菜单选中key
    const str = path.split('example/')[1] || '';
    const str1 = str.split('/')[0] || '';
    const str2 = str1.split('?')[0] || '';
    return str2;
  };

  public render() {
    const { hideSide, openKeys, selectedKeys } = this.state;
    return (
      <div>
        <Layout>
          {!hideSide && (
            <Sider
              style={{
                overflow: 'auto',
                height: '100vh',
                position: 'fixed',
                left: 0,
                top: 0,
                background: '#fff',
              }}
            >
              <Menu
                mode="inline"
                defaultOpenKeys={this.rootMenuKeys}
                onOpenChange={this.onOpenChange}
                selectedKeys={selectedKeys}
                style={{ height: '100%' }}
                items={this.menuList}
                onClick={(item) => {
                  // console.log('item:::', item.key)
                  this.navigator.push(item.key);
                }}
              ></Menu>
            </Sider>
          )}
          <Layout style={{ marginLeft: hideSide ? 0 : 200 }}>
            <Header style={{ background: '#fff', padding: 0 }}>
              <View
                style={{
                  width: '100%',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <a onClick={this.toggleSide} style={{ padding: '0 25px' }}>
                  {hideSide ? '>' : '<'}
                </a>
                <h3 style={{ margin: 0 }}>
                  {(
                    this.rootMenuRouteKeys.find(
                      (e) => e.key == selectedKeys[0],
                    ) || {}
                  ).label || ''}
                </h3>
              </View>
            </Header>
            <Content style={{ margin: '24px 16px', overflow: 'initial' }}>
              <Outlet />
            </Content>
          </Layout>
        </Layout>

        <Blurs />
      </div>
    );
  }

  private get rootMenuKeys() {
    return this.menuList.map((e) => {
      return e.key;
    });
  }
  private onOpenChange = (keys: any) => {
    // const { openKeys } = this.state
    // const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
    // if (this.rootMenuKeys.indexOf(latestOpenKey) === -1) {
    //   this.setState({ openKeys: keys });
    // } else {
    //   this.setState({
    //     openKeys: latestOpenKey ? [latestOpenKey] : [],
    //   });
    // }
  };

  private toggleSide = () => {
    this.setState({
      hideSide: !this.state.hideSide,
    });
  };
}

/**  **/
// import Base from '@/components/Base';
// import styles from './index.less';

// interface State {

// }

// const ExampleLayout: React.FC<any> = props => {
//   return <div style={{ padding: 20 }}>
//     <div>公共部分</div>
//     { props.children }
//   </div>;
// }

// export default ExampleLayout
